<template>
  <div class="main-bg">
    <el-form ref="form" :model="queryParams" :inline="true" size="small">
      <el-form-item label="门店名称:">
        <el-input v-model="queryParams.storeName"></el-input>
      </el-form-item>
      <el-form-item label="联系方式:">
        <el-input v-model="queryParams.storeUserPhone"></el-input>
      </el-form-item>
      <el-form-item label="选择时间:">
        <el-date-picker v-model="searchDate" type="daterange" range-separator="至" start-placeholder="开始时间"
          format="yyyy-MM-dd" value-format="yyyy-MM-dd" end-placeholder="结束时间" @change="dateChange()"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%" v-loading="loading">
      <el-table-column prop="storeCode" header-align="center" align="center" label="门店编号"></el-table-column>
      <el-table-column prop="storeName" header-align="center" align="center" label="门店名称"></el-table-column>
      <el-table-column prop="storePhone" header-align="center" align="center" label="联系方式"></el-table-column>
      <el-table-column prop="storeStartTime" header-align="center" align="center" label="开始时间">
        <template slot-scope="scope">
          {{ timestampToTime(scope.row.storeStartTime)}}
        </template>
      </el-table-column>
      <el-table-column prop="storeEndTime" header-align="center" align="center" label="结束时间">
        <template slot-scope="scope">
          {{ timestampToTime(scope.row.storeEndTime)}}
        </template>
      </el-table-column>
      <el-table-column prop="storePaymentState" header-align="center" align="center" label="支付状态">
        <template slot-scope="scope">
          <span v-if="scope.row.storePaymentState === 0">未支付</span>
          <span v-if="scope.row.storePaymentState === 1">已支付</span>
        </template>
      </el-table-column>
      <el-table-column
          prop="createTime"
          align="center"
          label="创建时间">
        </el-table-column>
      <el-table-column prop="remark" align="center" label="备注"></el-table-column>
      <el-table-column align="center" label="操作" width="200px">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" circle @click="editRow(scope.row)" size="mini"></el-button>
          <el-button type="success" icon="el-icon-view" circle @click="viewRow(scope.row)" size="mini"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background class="pagination_pos" :current-page="pageNum" :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize" :total="total" layout="total, sizes, prev, pager, next, jumper"
      @size-change="pageSizeChangeHandle" @current-change="pageCurrentChangeHandle"></el-pagination>

    <el-dialog title="编辑" :visible.sync="dialogEditVisible" width="500px">
      <el-form :model="saveForm" :rules="saveFormRules" ref="saveFormREF" label-width="150px" class="demo-ruleForm">
        <el-form-item prop="storeStartTime" label="开始时间:" >
          <el-date-picker v-model="saveForm.storeStartTime" type="date"
          format="yyyy-MM-dd" value-format="timestamp"></el-date-picker>
        </el-form-item>
        <el-form-item prop="storeEndTime" label="结束时间:">
          <el-date-picker v-model="saveForm.storeEndTime" type="date"
          format="yyyy-MM-dd" value-format="timestamp"></el-date-picker>
        </el-form-item>
        <el-form-item prop="storePaymentState" label="支付状态:">
          <el-select v-model="saveForm.storePaymentState" clearable placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeEditDialog">取 消</el-button>
        <el-button type="primary" @click="submitForm('saveFormREF')">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="门店详情" :visible.sync="dialogFormVisible" width="800px">
      <el-descriptions  :column="2"  border>
      <el-descriptions-item label="门店编号">{{formDetail.storeCode}}</el-descriptions-item>
      <el-descriptions-item label="联系方式">{{formDetail.storePhone}}</el-descriptions-item>
      <el-descriptions-item label="门店地址">{{formDetail.storeAddress}}</el-descriptions-item>
      <el-descriptions-item label="开始时间">{{timestampToTime(formDetail.storeStartTime)}}</el-descriptions-item>
      <el-descriptions-item label="结束时间">{{timestampToTime(formDetail.storeEndTime)}}</el-descriptions-item>
      <el-descriptions-item label="支付状态">{{formDetail.storePaymentState==0?'未支付':'已支付'}}</el-descriptions-item>
      <el-descriptions-item label="业务范围">{{formDetail.businessScope}}</el-descriptions-item>
      <el-descriptions-item label="备注">{{formDetail.remark}}</el-descriptions-item>
    </el-descriptions>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="closeDialog">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getStoreListPage,getStoreDetails,updateStore } from "@/api/store/store";

export default {
  name: "systemStore",
  data() {
    return {
      searchDate:[],
      dialogFormVisible: false,
      dialogEditVisible:false,
      pageNum: 1,  //当前页码
      pageSize: 10,  //每页数
      total: 0,  //总数
      giftFlag: false,
      loading:true,
      formDetail: {},
      queryParams: {
        storeName: "", //门店名称
        storeUserPhone: "", //手机号
        storeCoding: "", //识别号
        createStartStrTime: "", //开始时间
        createEndStrTime: "" //结束时间(时间戳)
      },
      tableData: [],
      saveForm:{
        storeStartTime:'',
        storeEndTime:'',
        storePaymentState:'',
      },
      options:[
        {
          value:0,
          label:'未支付',
        },
        {
          value:1,
          label:'已支付',
        }
      ],
      saveFormRules:{
        storeStartTime:{
          required: true, message: '请选择门店开始时间', trigger: 'change'
        },
        storeEndTime:{
          required: true, message: '请选择门店结束时间', trigger: 'change'
        },
        storePaymentState:{
          required: true, message: '请选择门店支付状态', trigger: 'change'
        }
      },
      titleText:'',
      formType:'',
      edidId:''
    }
  },
  mounted() {
    this.handleQuery()
  },
  methods: {
    handleQuery() {
      let body = {
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        table: {
          "storeName": "", //门店名称
          "storeUserPhone": "", //手机号
          "createStartStrTime": this.searchDate[0], //开始时间
          "createEndStrTime": this.searchDate[1], //结束时间(时间戳)
          "storeCoding": ""
        }
      }
      getStoreListPage({ body }).then(res => {
        this.tableData = res.body.list.map(item => {
          item.createTime = this.$utils.getCompleteDate(item.createTime, 'yyyy-MM-dd')
          return item
        })
        this.loading=false
        this.pageNum = res.body.currentPage
        this.total = res.body.totalCount
      })

    },
     // 获取门店详情
     async getForm(){
        let body={
          "storeId": localStorage.getItem('storeId'),
          storeCoding:localStorage.getItem('storeCoding')
        }

        let res = await getStoreDetails({body})
        this.formDetail=res.body
      },
      timestampToTime(timestamp) {
       var time = this.dayjs(timestamp).format("YYYY-MM-DD");
       // var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
       // var Y = date.getFullYear() + '-';
       // var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
       // var D = date.getDate() + ' ';
       return time;
      },
    // 增加
    add() {
      this.dialogFormVisible = true
      this.titleText = '新增'
      this.formType = 'ADD'
    },
    // 编辑
    editRow(row) {
      this.formType = 'EDIT'
      this.titleText = '编辑'
      this.dialogEditVisible = true
      this.edidId = row.storeId
      let body = {
        "storeId":row.storeId,
        "storeCoding":localStorage.getItem('storeCoding')
      }
      getStoreDetails({body}).then(res => {
        let {storeStartTime,storeEndTime,storePaymentState} = res.body
        this.saveForm.storeStartTime = storeStartTime
        this.saveForm.storeEndTime = storeEndTime
        this.saveForm.storePaymentState = storePaymentState
      })
    },
    // 查看
    viewRow(row){
      this.dialogFormVisible = true
      let body = {
        "storeId":row.storeId,
        "storeCoding":localStorage.getItem('storeCoding')
      }
      getStoreDetails({body}).then(res => {
        this.formDetail = res.body
      })
    },
    // 保存
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let body = {
            "storeId":this.edidId,
            "storeStartTime": this.saveForm.storeStartTime, //门店开始时间
            "storeEndTime": this.saveForm.storeEndTime, //门店结束时间
            "storePaymentState": this.saveForm.storePaymentState, //门店支付状态
            "storeCoding":localStorage.getItem('storeCoding')
          }
          updateStore({body}).then(res => {
              if(res.code === 2000){
                this.$message({
                  message: res.msg,
                  type: 'success',
                  onClose:this.closeEditDialog()
                });
              }
            })
          console.log('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 关闭弹框
    closeDialog() {
      this.dialogFormVisible = false
    },
    // 关闭编辑弹窗
    closeEditDialog() {
      this.dialogEditVisible = false
      this.$refs['saveFormREF'].resetFields()
      this.handleQuery()
    },
    //pageSize 改变时会触
    pageSizeChangeHandle(value) {
      this.pageNum = 1;
      this.pageSize = value;
      this.handleQuery();
    },
    // pageNum 改变时会触发
    pageCurrentChangeHandle(value) {
      this.pageNum = value;
      this.handleQuery();
    },
  }
}
</script>

<style lang="scss" scoped>
.pagination_pos {
  float: right;
  margin-top: 28px;
}
</style>
